<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <title>洪源海购-首页</title>
  <link rel="shortcut icon" href="./img/icon.ico" type="image/x-icon">
  <link rel="stylesheet/less" href="css/reset.less">
  <link rel="stylesheet/less" href="css/tabbar.less">
  <link rel="stylesheet/less" href="css/common.less">
  <link rel="stylesheet/less" href="css/home_download.less">
  <link rel="stylesheet/less" href="css/home_subsidy.less">
  <link rel="stylesheet/less" href="css/home.less">
  <link rel="stylesheet/less" href="css/home_category.less">
  <link rel="stylesheet/less" href="css/home_product.less">
  <script src="./js/lessc.js"></script>
  <style>

  </style>
</head>
<body>
  
  <div class="tabbar">
    <div class="item">
      <img src="./img/shouye.png" alt="">
    </div>
    <div class="item">
      <img src="./img/fenlei.png" alt="">
    </div>
    <div class="item">
      <img src="./img/gouwuche.png" alt="">
    </div>
    <div class="item">
      <img src="./img/wode.png" alt="">
    </div>
  </div>

  <div class="home">
    <div class="download">
      <div class="left">
        <img class="log" src="./img/logo.png" alt="">
        <div class="info">
          <div class="title">【考拉海购】官方自营 正品保障</div>
          <div class="desc">下载APP新人可享125元购物礼包</div>
        </div>
      </div>
      <a class="right" href="#">打开APP</a>
    </div>

    <div class="subsidy">
      <div class="header">
        <div class="left">
          <img src="./img/strong_subsidy.png" alt="">
          <div class="time">
            <span class="item hour">08</span>
            <span class="split">:</span>
            <span class="item mintue">41</span>
            <span class="split">:</span>
            <span class="item second">49</span>
          </div>
        </div>
        <div class="right">大牌底价补贴</div>
      </div>
      <div class="list">
        <div class="item">
          <img src="./img/subsidy_01.jpg" alt="">
          <div class="info">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="money">362</span>
            </div>
            <div class="old">¥999</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/1.jpeg" alt="">
          <div class="info">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="money">412</span>
            </div>
            <div class="old">¥929</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/2.jpeg" alt="">
          <div class="info">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="money">432</span>
            </div>
            <div class="old">¥599</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/3.jpeg" alt="">
          <div class="info">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="money">242</span>
            </div>
            <div class="old">¥969</div>
          </div>
        </div>
      </div>
    </div>

    <div class="category">
      <div class="item">
        <div class="title">精选</div>
        <div class="subtitle">猜你喜欢</div>
      </div>
      <div class="item active">
        <div class="title">美妆</div>
        <div class="subtitle">魅力妆粉</div>
      </div>
      <div class="item">
        <div class="title">母婴</div>
        <div class="subtitle">家有萌宝</div>
      </div>
      <div class="item">
        <div class="title">数码</div>
        <div class="subtitle">酷玩科技</div>
      </div>
      <div class="item">
        <div class="title">保健</div>
        <div class="subtitle">健康养生</div>
      </div>
    </div>

    <div class="product">
      <div class="item">
        <div class="album">
          <img src="./img/shengluolan1.jpeg" alt="">
        </div>
        <div class="info">
          <div class="company">圣罗兰</div>
          <div class="desc">新品粉】YSL 圣罗兰皮革气垫粉底液#B20#B10#B30替换装mini版体验明彩无暇羽毛墨水遮瑕持久轻薄服帖控油哑光</div>
          <div class="tags">
            <sapn class="tag">下单立减51元</sapn>
            <sapn class="tag">2件9.5折</sapn>
          </div>
          <div class="price">
            优惠价
            <span>¥</span>
            <span>137</span>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">下单立减300元</span>
            <span class="tag">包税</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>

      <div class="item">
        <div class="album">
          <img src="./img/shengluolan1.jpeg" alt="">
        </div>
        <div class="info">
          <div class="company">圣罗兰</div>
          <div class="desc">新品粉】YSL 圣罗兰皮革气垫粉底液#B20#B10#B30替换装mini版体验明彩无暇羽毛墨水遮瑕持久轻薄服帖控油哑光</div>
          <div class="tags">
            <sapn class="tag">下单立减51元</sapn>
            <sapn class="tag">2件9.5折</sapn>
          </div>
          <div class="price">
            优惠价
            <span>¥</span>
            <span>137</span>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">下单立减300元</span>
            <span class="tag">包税</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>

      <div class="item">
        <div class="album">
          <img src="./img/shengluolan1.jpeg" alt="">
        </div>
        <div class="info">
          <div class="company">圣罗兰</div>
          <div class="desc">新品粉】YSL 圣罗兰皮革气垫粉底液#B20#B10#B30替换装mini版体验明彩无暇羽毛墨水遮瑕持久轻薄服帖控油哑光</div>
          <div class="tags">
            <sapn class="tag">下单立减51元</sapn>
            <sapn class="tag">2件9.5折</sapn>
          </div>
          <div class="price">
            优惠价
            <span>¥</span>
            <span>137</span>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">下单立减300元</span>
            <span class="tag">包税</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>


    </div>
  </div>


  <script>
    
    var hourEl = document.querySelector(".hour")
    var mintueEl = document.querySelector(".mintue")
    var secondEl = document.querySelector(".second")
    
    
    setInterval(function() {
      
      var date = new Date()
      var hour = date.getHours()
      var mintue = date.getMinutes()
      var second = date.getSeconds()

      hourEl.textContent = 23 - hour
      mintueEl.textContent = 59 - mintue
      secondEl.textContent = 59 - second
    },1000)
  </script>
</body>
</html>